<template>
	<div class="order">
			<div class="title">
				<router-link to="/">
					<i class="iconfont">&#xe60e;</i>
				</router-link>
				<h3>全部订单</h3>
			</div>
			<ul>
					<li v-for="item in list " :key="item.id">
						<router-link to="#">
							{{item.txt}}
						</router-link>	
					</li>
			</ul>
			<div class="pic">
				<img src="../../../public/lunboimg/1.png">
			</div>
			<div class="txt">
				<h3>这里什么也没有</h3>
				<h3>继续去探索未知的新世界吧</h3>
			</div>
		<BottomNav :propsurl='arrurl'></BottomNav>
	</div>
</template>

<script>
	import BottomNav from '../default/BottomNav.vue'
	export default{
		name:'Order',
		data(){
			return{
				list:[
					{id:1,txt:"全部"},
					{id:2,txt:"待付款"},
					{id:3,txt:"已付款"},
					{id:4,txt:"待评价"},
					{id:5,txt:"退款/售后"}
				],
				arrurl:[require('@/assets/img/nav2-2.png'),require('@/assets/img/nav3-2.png'),require('@/assets/img/nav4-1.png')]
			}
		},
		components:{
			BottomNav
		}
	}
</script>

<style scoped>
	.order{
		position: relative;
		background-color: #f2f2f2;
	}
	a{
		color: black;
		text-decoration: none;
	}
	i{
		font-weight: bold;
		text-indent: 1em;
		float: left;
		line-height: 1.2rem;
	}
	.title h3{
		background-color: #f2f2f2;
		font-weight: bold;
		height: 1.2rem;
		width: 100%;
		font-size: .5rem;
		line-height: 1.2rem;
		text-align: center;
	}
	.order ul{
		background-color: #f2f2f2;
		height: 1.3rem;
		line-height: 1.3rem;
	}
	.order ul li{
		text-align: center;
		font-size: .4rem;
		float: left;
		width: 20%;
	}
	
	.pic img{
		position: absolute;
		width: 6rem;
		top: 7rem;
		left: 25%;
	}
	.txt{
		position: absolute;
		text-align: center;
		top: 13rem;
		font-size: .35rem;
		left: 30%;
	}
	.txt h3{
		margin-bottom: .3rem;
	}
</style>
